<template>
	<view class="font-13" style="width: 100%">
		<view @click="jumpToDetail">
			<view class="flex just-between">
				<view class="flex">
					<view class="chnltype" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }">
						{{ chnlType }}
					</view>
					<view v-if="!!scope.thirdOrderIndex" style="margin-left: 12rpx; font-size: 42rpx; font-weight: bold">
						<text>#</text>
						<text>{{ scope.thirdOrderIndex }}</text>
					</view>
				</view>
				<view v-if="scope.orderStatus != '3' && scope.orderStatus != '4' && orderStatusRemark"
					style="font-size: 42rpx; font-weight: bold" @click.stop="openDeliveryPopup"
					class="flex align-center">
					<view>{{ orderStatusRemark }}</view>
					<eui-uicons type="right" size="30" style="color: #000 !important; margin-top: 10rpx"></eui-uicons>
				</view>
				<view v-if="(scope.orderStatus == '3' || scope.orderStatus == '4') && deliveryStatus"
					style="font-size: 42rpx; font-weight: bold" @click.stop="openDeliveryPopup"
					class="flex align-center">
					<view>{{ deliveryStatus }}</view>
					<eui-uicons type="right" size="30" style="color: #000 !important; margin-top: 10rpx"></eui-uicons>
				</view>
			</view>
			<view style="border-bottom: 1rpx solid #e1e1e1; padding-bottom: 8px; margin-top: 12rpx"
				class="flex just-between">
				<view v-if="scope.deliveryTimeType == '2'" class="icon-tag-red">{{ '预' }}</view>
				<view class="flex just-between" style="flex: 1;flex-wrap: wrap;">
					<view style="margin-left: 4rpx; font-size: 32rpx;"
						v-if="scope.orderStatus != '7' && scope.orderStatus != '8' && scope.platformType != '2' && scope.pickType != '2'">
						<text>{{ scope.pickType == '0' ? '请':'将'}}</text>
						<text style="color: #e43e00; font-weight: bold;">
							{{ !!scope.expectDeliveryTime || !!scope.expectSendStime || !!scope.expectSendEtime ?
							isTodayFormatDeliveryTime() : '-' }}
						</text>
						<text>{{ scope.pickType == '0' ? '送达' : '自提' }}</text>
					</view>
					<view style="font-size: 32rpx; text-align: right; margin-left: 5rpx;flex: 1 1 auto;"
						v-if="scope.orderStatus != '7' && scope.orderStatus != '8' && scope.platformType != '2' && scope.pickType != '2'">
						<div>
							<span>
								{{
								isGreaterThanCurTime
								? scope.orderStatus == '2' && scope.isPrinted == '1' && !!scope.expectPickupTime
								? '剩余拣货'
								: (scope.pickType != '1' ? '剩余送达' : '剩余自提')
								: scope.orderStatus == '2' && scope.isPrinted == '1' && !!scope.expectPickupTime
								? '拣货超时'
								: (scope.pickType != '1' ? '送达超时' : '自提超时')
								}}
							</span>
							<span style="color: #e43e00; font-weight: bold">{{ formatDuringText }}</span>
						</div>
					</view>
				</view>
			</view>
		</view>
		<view v-if="scope.shipperPhone && scope.pickType == '0'" class="flex just-between align-center"
			style="padding: 20rpx 30rpx 20rpx 0; border-bottom: 1rpx dashed #e1e1e1">
			<view>
				<view class="flex align-center" style="height: 50rpx">
					<text style="font-size: 32rpx; font-weight: bold">骑手 {{ scope.shipperName || '匿名' }}</text>
				</view>
			</view>
			<view style="width: 70rpx; height: 70rpx; border-radius: 70rpx; background: #ededed"
				class="flex align-center just-center" @click.stop="showShipPhonePop">
				<image :src="_img_tel" style="height: 42rpx; width: 42rpx"></image>
			</view>
		</view>
		<view class="flex just-between align-center" style="padding: 20rpx 30rpx 20rpx 0">
			<view>
				<view class="flex align-center" style="height: 50rpx">
					<text style="font-size: 32rpx; font-weight: bold">顾客 {{ scope.consigneeName || '匿名' }}</text>
					<text style="margin-left: 9rpx; font-size: 25rpx; font-weight: bold"
						v-if="scope.consigneePhoneLast">(尾号{{ scope.consigneePhoneLast }})</text>
					<template v-if="!!scope.orderTag">
						<text style="
								display: inline-block;
								width: 76rpx;
								line-height: 28rpx;
								height: 28rpx;
								background: #f3f3f3;
								border-radius: 6rpx;
								text-align: center;
								font-size: 25rpx;
								margin-left: 7rpx;
							" v-for="(item, index) in scope.orderTag.split(',')" :key="index">
							{{ item }}
						</text>
					</template>
				</view>
				<view class="flex align-center">
					<text class="icon-tag">{{ pickType }}</text>
					<text style="margin-left: 15rpx; font-size: 32rpx; color: #4c4c4c; margin-right: 4rpx"
						@click.stop="showPop">顾客地址></text>
				</view>
			</view>
			<view style="width: 70rpx; height: 70rpx; border-radius: 70rpx; background: #ededed"
				class="flex align-center just-center" @click.stop="showContact" v-if="scope.privacyConsigneePhone">
				<image :src="_img_tel" style="height: 42rpx; width: 42rpx"></image>
			</view>
		</view>
		<view v-if="scope.orderCancelReason && scope.orderStatus == '8'"
			style="color: #ff3939; margin-bottom: 8rpx; background: #fef4e5; border-radius: 0px 0px 11rpx 11rpx; line-height: 35rpx; padding: 11rpx 7rpx 10rpx 7rpx"
			class="ht-35">
			<text class="co-00">原因：</text>
			{{ scope.orderCancelReason }}
		</view>
		<view v-if="scope.buyerRemark"
			style="background-color: #dff3ff; line-height: 45rpx; padding: 18rpx 24rpx; font-size: 32rpx; margin-bottom: 13rpx; border-radius: 0px 0px 16rpx 16rpx; white-space: wrap;"> 备注：{{ scope.buyerRemark }} </view>
		<view class="flex just-between align-center">
			<view style="font-weight: bold; font-size: 32rpx; flex: 1">
				共{{ formatOrderKind(scope.bcmOrderGoodsList) }}行{{ scope.orderGoodsNum }}件 重{{ scope.orderGoodsWeight
				}}kg
			</view>
			<view class="flex just-between">
				<view style="width: 70rpx; height: 70rpx; border-radius: 70rpx; background: #ededed"
					class="flex align-center just-center" @click.stop="showImage = !showImage" v-if="!showImage">
					<image :src="_img_list" style="height: 35rpx; width: 35rpx"></image>
				</view>
				<view style="width: 70rpx; height: 70rpx; border-radius: 70rpx; background: #ededed"
					class="flex align-center just-center" @click.stop="showImage = !showImage" v-else>
					<image :src="_img_list_show" style="height: 35rpx; width: 35rpx"></image>
				</view>
				<view class="flex align-center just-right" style="color: #4c4c4c; font-size: 32rpx; margin-left: 30rpx"
					@click.stop="setOrderGoodsOpen">
					<view>订单详情</view>
					<eui-uicons :type="goodsOpen ? 'up' : 'down'" size="30"
						style="color: #4c4c4c !important; margin-top: 6rpx"></eui-uicons>
				</view>
			</view>
		</view>
		<view class="" v-if="goodsOpen">
			<GoodsList :goodsList="scope.bcmOrderGoodsList" :showImage="showImage"></GoodsList>
			<OrderState :scope="scope"></OrderState>
		</view>
		<view v-if="!!scope.bcmOrderPayList.length"
			style="border-top: 1rpx dashed #e1e1e1; margin-top: 6rpx; padding: 3rpx 0">
			<view v-for="(f, i) in scope.bcmOrderPayList" :key="i">
				<view class="flex just-between" style="line-height: 35rpx; font-size: 32rpx; padding: 10rpx 0 0">
					<view class="">
						{{ f.payName }}
					</view>
					<view class="" style="color: #e43e00; text-align: right; font-weight: bold">
						{{ formatPrice(f.amount) }}
					</view>
				</view>
			</view>
		</view>
		<view class="flex just-between" style="line-height: 35rpx; font-size: 32rpx; padding: 10rpx 0 0" v-else>
			<view class="">顾客实付</view>
			<view class="" style="color: #e43e00; text-align: right; font-weight: bold">
				{{ formatPrice(scope.totalAmount) }}
			</view>
		</view>
		<view class="flex just-between align-center"
			style="border-top: 1rpx solid #e1e1e1; height: 99rpx; margin-top: 14rpx" v-if="goodsOpen">
			<view style="font-size: 25rpx">
				<view class="flex" style="line-height: 29rpx; margin-bottom: 6rpx">
					<view style="margin-right: 8rpx">下单时间:</view>
					<view>{{ scope.orderCreateTime }}</view>
				</view>
				<view class="flex just-between align-center" style="line-height: 29rpx; font-size: 25rpx">
					<view style="margin-right: 26rpx">订单号:{{ scope.thirdOrderNo }}</view>
					<copy-item :data="scope.thirdOrderNo">
						<template v-slot:default>
							<view class="icon-tag">复制单号</view>
						</template>
					</copy-item>
				</view>
			</view>
			<view class="flex align-center">
				<view
					style="width: 70rpx; height: 70rpx; border-radius: 70rpx; background: #ededed; margin-right: 30rpx"
					class="flex align-center just-center" @click.stop="setPrint"
					v-if="!(scope.orderStatus == '1' || (scope.orderStatus == '2' && scope.isPrinted == '0'))">
					<image :src="_img_printer" style="height: 35rpx; width: 35rpx"></image>
				</view>
			</view>
		</view>
		<view v-if="scope.orderStatus != '8' && scope.bcmAfsOrderList && scope.bcmAfsOrderList.length > 0"
			style="margin-top: 8rpx">
			<view v-for="(a, index) in scope.bcmAfsOrderList" :key="index">
				<AfsOrderGoodsItem :scope="scope" :a="a" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { formatPrice } from '../../../../hooks/bcmUseUntils';
import { greaterThanCurTime, isToday, getDiffTime, formatTimeRangeText } from '../../../../hooks/useDatetimeUtil';
import service from '@/common/service';
import { getBcmUrl, bcmRequest } from '../../../../hooks/bcmServices';
import { computed, defineProps } from 'vue';
import _img_tel from '../../../../static/img/bcmIcons/tel.png';
import _img_list from '../../../../static/img/bcmIcons/list.png';
import _img_list_show from '../../../../static/img/bcmIcons/list_show.png';
import _img_printer from '../../../../static/img/bcmIcons/printer.png';
import GoodsList from '../../components/GoodsList.vue';
import OrderState from './OrderState.vue';
import CopyItem from '../../components/CopyItem.vue';
import AfsOrderGoodsItem from './AfsOrderGoodsItem.vue';

const emit = defineEmits([
	'print',
	'update:modelValue',
	'update:showPop',
	'update:showContactPop',
	'update:showContactPop',
	'update:showDeliveryPop',
	'update:deliverList',
	'update:logisticsCode',
	'update:showShipPhonePop'
]);

const props = defineProps<{
	scope?: any;
	chnlTypeList?: any[];
	logisticsCodeList?: any[];
	deliveryTimeTypeList?: any[];
	pickTypeList?: any[];
	deliveryStatusList?: any[];
	orderStatusList?: any[];
	orderAction?: () => void;
	currentTime?: Number;
	showPop?: Boolean;
	showContactPop?: Boolean;
	showShipPhonePop?: Boolean;
	orderItem?: any;
	deliverList?: any[];
	logisticsCode?: string;
	showConfigModal?:boolean;
}>();

const showImage = ref(false);
const goodsOpen = ref(false);
const showConfigModal = ref(false);
const bcmUrl = getBcmUrl();

watch(() => props.showConfigModal, (newVal) => {
	if (newVal) {
		showConfigModal.value = props.showConfigModal;
	}
}, { immediate: true });

const setOrderGoodsOpen = () => {
	goodsOpen.value = !goodsOpen.value;
};

const showContact = () => {
	emit('update:modelValue', props.scope);
	emit('update:showContactPop', true);
};

const showPop = () => {
	emit('update:modelValue', props.scope);
	emit('update:showPop', true);
};

const showShipPhonePop = () => {
	emit('update:modelValue', props.scope);
	emit('update:showShipPhonePop', true);
};

const jumpToDetail = () => {
	uni.navigateTo({
		url: './detail?c_id=' + props.scope.orderId + '&showModal=' + showConfigModal.value
	});
};

const isTodayFormatDeliveryTime = () => {
	let text;
	if ((!!props.scope.expectSendStime && !!props.scope.expectSendEtime) || (!props.scope.expectSendEtime) || (!props.scope.expectSendStime)) {
		text = formatTimeRangeText(props.scope.expectSendStime, props.scope.expectSendEtime);
	} else {
		text = formatTimeRangeText(props.scope.expectDeliveryTime, props.scope.expectDeliveryTime);
	}
	return text;
};

const openDeliveryPopup = async () => {
	await fetchOrderDeliveryList();
	emit('update:modelValue', props.scope);
	emit('update:logisticsCode', logisticsCode);
	emit('update:showDeliveryPop', true);
};

const fetchOrderDeliveryList = async () => {
	service.enjoyShowLoading('正在加载...');
	const req = {
		IsNotPage: true,
		WhereList: [
			{
				c_col: 'thirdOrderNo',
				c_oper: '等于',
				c_value: props.scope.thirdOrderNo,
				c_logic: '而且'
			}
		]
	};
	const result: any = await bcmRequest(bcmUrl.orderApi, '订单配送日志表', 'EnjoyQueryList', req);
	service.enjoyHideLoading();
	let list =
		result.ReturnObject.sort((a, b) => new Date(b.operateTime.replace(/-/g, '/')).getTime() - new Date(a.operateTime.replace(/-/g, '/')).getTime()).map((v: any) => {
			v.title = v.deliveryDesc;
			v.desc = v.operateBy ? '操作人: ' + v.operateBy + '    ' + isToday(v.operateTime) : isToday(v.operateTime);
			return v;
		}) || [];

	emit('update:deliverList', list);
};

const formatOrderKind = (list: any) => {
	let arr: any = [];
	list.map((v: any) => {
		arr.push(v.goodsBarcode);
	});
	return Array.from(new Set(arr)).length;
};

const chnlType = computed(() => {
	return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.text || props.scope.chnlType;
});
const color = computed(() => {
	return props.chnlTypeList?.find(v => v.value == props.scope.chnlType)?.color || '#000';
});

const orderStatusRemark = computed(() => {
	return props.orderStatusList?.find(v => v.value == props.scope.orderStatus)?.remark;
});

const deliveryStatus = computed(() => {
	return props.deliveryStatusList?.find(v => v.value == props.scope.deliveryStatus)?.text || props.scope.deliveryStatus;
});
const deliveryTimeType = computed(() => {
	return props.deliveryTimeTypeList?.find(v => v.value == props.scope.deliveryTimeType)?.text || props.scope.deliveryTimeType;
});
const pickType = computed(() => {
	return props.pickTypeList?.find(v => v.value == props.scope.pickType)?.text || props.scope.pickType;
});
const logisticsCode = computed(() => {
	return props.logisticsCodeList?.find(v => v.value == props.scope.logisticsCode)?.text || props.scope.logisticsCode;
});

const isGreaterThanCurTime = computed(() => {
	if (props.scope.orderStatus == '2' && props.scope.isPrinted == '1' && !!props.scope.expectPickupTime) {
		return greaterThanCurTime(new Date(props.scope.expectPickupTime.replace(/-/g, '/')));
	} else if (!!props.scope.expectDeliveryTime) {
		return greaterThanCurTime(new Date(props.scope.expectDeliveryTime.replace(/-/g, '/')));
	}
});

const formatDuringText = computed(() => {
	if (props.scope.orderStatus == '2' && props.scope.isPrinted == '1' && !!props.scope.expectPickupTime) {
		return getDiffTime(new Date(props.scope.expectPickupTime.replace(/-/g, '/')));
	} else if (!!props.scope.expectDeliveryTime) {
		return getDiffTime(new Date(props.scope.expectDeliveryTime.replace(/-/g, '/')));
	}
});

const setPrint = () => {
	emit('print', props.scope);
};
</script>
<style lang="scss" scoped>
@import "../../common/common.css";

.popup-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #fff;

  .popup-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100rpx;
    padding-right: 36rpx;
    padding-left: 30rpx;
    font-size: 33rpx;
    line-height: 100rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }
}

.bottom-1 {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  height: 70rpx;
  // padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
  // background: $uni-bg-color;
  border-top: 1rpx solid #979797;
}
</style>
